<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <meta name="referrer" content="never">
  <title>JS轮播</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }

    .box {
      position: relative;
      height: 230px;
      border: 3px solid #f00;
      overflow: hidden;
    }

    .center {
       width: 613px;
       margin: 50px auto;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 400%;
      height: 100%;
    }

    .content li {
      float: left;
      width: 25%;
    }

    .content li img {
      width: 100%;
      vertical-align: bottom;
    }

    button{
      margin-top: 20px;
      margin-right: 100px;
      padding: 12px 40px;
      font-size: 16px;
      letter-spacing: .1rem;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <!-- 轮播容器 -->
  <div class="box center">
    <!-- 运动元素 -->
    <ul class="content">
      <!-- 展示内容 -->
      <li><img src="../lib/images/bom/m1.jpg" alt=""></li>
      <li><img src="../lib/images/bom/m2.jpg" alt=""></li>
      <li><img src="../lib/images/bom/m3.jpg" alt=""></li>
      <li><img src="../lib/images/bom/m4.jpg" alt=""></li>
    </ul>
  </div>

  <div class="center">
    <button class="prev">上一个</button>
    <button class="next">下一个</button>
  </div>

  <script type="text/javascript">
    var prev = document.querySelector(".prev"),
        next = document.querySelector(".next"),
        moveEl = document.querySelector(".content");

    var w = moveEl.children[0].offsetWidth, // 记录一张图的宽度
        count = 0; // 记录移动个数

    prev.onclick = function (){
      // 临界值，位于第一个 -> 跳转到最后一个
      if(count == 0){
        count = moveEl.children.length;
      }
      count --;
      move(moveEl, -count * w);
    }

    next.onclick = function (){
      if(count == moveEl.children.length - 1){
        count = -1;
      }
      count ++;
      move(moveEl, -count * w);
    }

    function move(ele, end){
      if(ele.timer){
        clearInterval(ele.timer);
      }

      ele.timer = setInterval(function (){
        var step = (end - ele.offsetLeft) / 10;

        if(Math.abs(step) < 1){
          step = step > 0 ? 1 : Math.floor(step);
        }

        ele.style.left = ele.offsetLeft + step + "px";

        if(ele.offsetLeft == end){
          console.log("stop ...");
          clearInterval(ele.timer);
          ele.timer = null;
        }
      }, 1000/60);
    }
  </script>
</body>
</html>